<template>
  <div>
    <a-card class="card">
      <a-range-picker
        :allowClear="false"
        :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                  '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
        :defaultValue="[moment(start_date), moment(end_date)]"
        :disabled-date="disabledDate" @change="formDateChange" 
        style="width: 260px;margin-bottom: 20px;"
      />
      <standard-table
        rowKey="id"
        :loading='loading'
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{x:1200}"
        :pagination="{showTotal:total => `共 ${total} 条数据`}"
        @change="onChange"
      >
        <div slot="campaignNameStatus" slot-scope="{record}" style="cursor: pointer;">
          <a-tooltip>
            <template slot="title">
              {{record.campaignNameStatus}}
            </template>
            <span class="line1" style="width: 300px;display: block;">{{record.campaignNameStatus}}</span>
          </a-tooltip>
        </div>
        <div slot="budget" slot-scope="{record}">
          {{record.budget == 0 ? '不限' : (record.budget).toFixed(2)}}
        </div>
        <div slot="budget_new" slot-scope="{record}">
          {{(record.budget_new).toFixed(2)}}
        </div>
        <div slot="dsOcpcConversionsDetail90Cost" slot-scope="{record}">
          {{(record.dsOcpcConversionsDetail90Cost).toFixed(2)}}
        </div>
        <div slot="actionStatus" slot-scope="{record}">
          <div style="display:flex;align-items: center;">
            <div style="width:6px;height:6px;border-radius:50%;background-color:#00cc63" v-if="record.actionStatus==1"></div>
            <div style="width:6px;height:6px;border-radius:50%;background-color:#ff7875" v-else></div>
            <span style="margin-left:5px">{{record.actionStatus | setStatus}}</span>
          </div>
        </div>
      </standard-table>
    </a-card>
  </div>
</template>

<script>
import {getAdjustedCampaigns} from '@/api/dianshang/dianshang'
import StandardTable from '@/components/table/StandardTable'
import moment from 'moment'

export default {
  name:'budgetChangeView',
  data() {
    return {
      columns:[
        {
          title: '计划id',
          width: 100,
          dataIndex: 'campaignId',
          fixed: 'left',
        },
        {
          title: '推广计划',
          width: 400,
          dataIndex: 'campaignNameStatus',
          scopedSlots: { customRender: 'campaignNameStatus' },
          fixed: 'left',
        },
        {
          title: '账户',
          width: 160,
          dataIndex: 'userName',
          fixed: 'left',
        },
        {
          title: '旧预算',
          width: 150,
          dataIndex: 'budget',
          scopedSlots: { customRender: 'budget' },
        },
        {
          title: '新预算',
          width: 150,
          dataIndex: 'budget_new',
          scopedSlots: { customRender: 'budget_new' },
        },
        {
          title:'商品成单成本',
          width: 130,
          dataIndex: 'dsOcpcConversionsDetail90Cost',
          scopedSlots: { customRender: 'dsOcpcConversionsDetail90Cost' },
        },
        {
          title:'操作状态',
          dataIndex: 'actionStatus',
          width: 150,
          scopedSlots: { customRender: 'actionStatus' },
        },
        // {
        //   title: '操作时间',
        //   width: 150,
        //   dataIndex: 'date',
        // },
        {
          title: '操作时间',
          width: 200,
          dataIndex: 'create_time',
        },
      ],
      dataSource:[],
      loading:false,
      moment,
      start_date: moment().format("YYYY-MM-DD"),
      end_date: moment().format("YYYY-MM-DD"),
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      this.loading = true
      let params = {
        start_date: this.start_date,
        end_date: this.end_date,
        actionType: 1,
      }
      getAdjustedCampaigns(params).then((res) => {
        this.loading = false
        if(res.errcode == 0){
          console.log(res)
          this.dataSource = res.data
        }
      }).catch(() => {
        this.loading = false
      });
    },
    onChange(pagination, filters, sorter,) {
      console.log(pagination, filters, sorter)
    },
    formDateChange(e){
      if(e.length == 0){return}
      this.start_date = e[0].format("YYYY-MM-DD")
      this.end_date = e[1].format("YYYY-MM-DD")
      this.getData()
    },
    disabledDate(current){
      return current && ( current < moment().endOf('day').add(-100, 'days') || current > moment().endOf('day')) ;
    },
  },
  filters:{
    setStatus(e){
      switch(e){
        case 1: case '1':
          return '成功'
        case 2: case '2':
          return '失败'
      }
    }
  },
  components:{StandardTable}
}
</script>

<style lang="less" scoped>
  .line1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
